<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>JQ应用章 第三课</title>
	<link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/libs/animate.css">
</head>

<body id="body">
	<h1 align="center">JQ应用</h1>
	<hr>
	<ol>
		<li>JQ插件应用：scrollreveal</li>
		<li>CSS插件应用：animate</li>

		<li>JQ插件应用：Easing</li>
		<li>JQ插件应用：Countup http://www.jq22.com/yanshi10784</li>
		<li>JQ插件应用：wow http://mynameismatthieu.com/WOW/</li>
		<li>JQ插件应用：css3animateit http://jackonthe.net/css3animateit/</li>
		<li>JQ插件应用：css3animateit http://jackonthe.net/css3animateit/</li>
		
		<li>jQ插件课外阅读： 滚动位置变化插件 https://github.com/vbarthel-fr/scroll-based-animation</li>
		<li>jQ插件课外阅读： 列表滚动结合CSS3动画插件 http://lab.hakim.se/scroll-effects</li>

		<li>canvas装逼神器：http://sc.chinaz.com/jiaobendemo.aspx?downloadid=5201625407458</li>
		<li>canvas装逼神器：http://sc.chinaz.com/jiaobendemo.aspx?downloadid=5201625407458</li>
		<li>canvas装逼神器：http://www.jq22.com/jquery-info895</li>
		

	</ol>

	<p>演示：</p>

		<div class="box one bounceInRight">
			asd
		</div>

		<div class="box two bounceInRight">
			sdf
		</div>

		<div class="box three bounceInRight">
			sdf
		</div>

		<div class="box four bounceInRight">
			sdf
		</div>

		<div class="box bounceInRight">
			sdf
		</div>

		<div class="box bounceInRight">
			sdf
		</div>

		<div class="number">10000</div>

		<div class="wow bounceInRight" data-wow-duration="2s" data-wow-delay="0.2s">
			这里是动画
		</div>

	<style>
		.box {
			/*float: left;*/
			width: 200px;
			height: 400px;
			background: #ccc;
			border-radius: 20px;
			margin: 20px;
			padding: 10px;
		}
	</style>

	<script src="./js/Jquery.js"></script>
	<!-- <script src="./dist/scrollreveal.min.js"></script>
	<script>
		window.sr = ScrollReveal({
			reset: true,
			delay: 100,
			scale: 0.2,
			origin: 'right',
			distance: '500px'
		}).reveal('.box');
	</script> -->

	<!-- <script src="http://www.jq22.com/demo/jqueryCountup20161120/js/jquery.waypoints.min.js"></script>
	<script src="http://www.jq22.com/demo/jqueryCountup20161120/js/jquery.countup.min.js"></script>
	<script>
		$('.number').countUp({
			delay: 1,
			time: 500
		});
	</script> -->

	<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
	<!-- <script>
		wow = new WOW(
		{
		boxClass:     'box',      // default
		animateClass: 'animated', // default
		offset:       0,          // default
		mobile:       true,       // default
		live:         true        // default
		}
		)
		wow.init();
	</script> -->

</body>
</html>